<template>
	<!-- 
    主要改动1：将按钮区域（现在是 .sticky-footer）从 .notice-card 中移出，
    作为 .container 的直接子元素。
  -->
	<view class="container">
		<!-- 主通知卡片 -->
		<view class="notice-card">
			<!-- 1. 头部 -->
			<view class="card-header">
				<text class="card-header-text">您有1个班级待缴费</text>
			</view>

			<!-- 2. 富文本内容区域 -->
			<view class="card-body">
				<rich-text :nodes="formattedContent"></rich-text>
			</view>

			<!-- 按钮区域已移出 -->

		</view>

		<!-- 2. 固定在底部的按钮区域 (原 card-footer) -->
		<view class="bottom-actions">
			<button class="action-button btn-secondary" @click="onAcknowledge">我知道了</button>
			<button class="action-button btn-primary" @click="onCheckClasses">查看已报班级</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	// --- 数据 ---
	const rawHtml = ref(
		`<p>\t恭喜您已成功报名韶关开放大学班级。请您于6月30日-7月1日回校缴费，并加入班级微信群。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;如有疑问请联系校方管理人员，电话：0751--8760290，地址： 韶关市武江区新兴路9号韶关开放大学综合楼一楼社区教育指导科（ 可地图导航韶关开放大学）。</p><p class="ql-align-right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;韶关开放大学</p><p class="ql-align-right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2025 年6月18日</p><p><br></p>`
	);

	const formattedContent = computed(() => {
		if (!rawHtml.value) return '';
		return rawHtml.value
			.replace(/class="ql-align-right"/g, 'style="text-align:right;"')
			.replace(/<p>\t/g, '<p style="text-indent: 2em;">')
			.replace(/&nbsp;/g, ' ');
	});

	// --- 方法 ---
	const onAcknowledge = () => {
		console.log('用户点击 [我知道了]');
		uni.showToast({
			title: '已确认',
			icon: 'none'
		});
	};

	const onCheckClasses = () => {
		console.log('用户点击 [查看已报班级]');
		uni.navigateTo({
			url: '/pages/user/my-classes' // 请替换为您的实际页面路径
		});
	};
</script>

<style lang="scss" scoped>
	// 定义颜色变量，方便统一管理和修改
	$primary-red: #E54D42;
	$hint-pink: #ffeeee;
	$text-color: #333333;

	// 全局容器样式
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 93vh;
	}

	// 新增：可滚动的内容包装器 
	.content-wrapper {
		flex: 1; // 关键：让此元素占据所有剩余的垂直空间
		overflow-y: auto; // 关键：当内容超出时，允许垂直滚动
		padding: 30rpx 30rpx 0; // 上左右加内边距
	}

	// 主卡片样式
	.notice-card {
		width: 100%;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	// 卡片头部
	.card-header {
		display: flex;
		justify-content: center;
		padding: 24rpx 30rpx;
		background-color: $hint-pink;

		.card-header-text {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}
	}

	// 卡片内容主体
	.card-body {
		padding: 30rpx;
		font-size: 28rpx;
		line-height: 1.8;
		color: $text-color;

		:deep(p) {
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	// 底部按钮区域 (原 card-footer, 关键改动)
	.bottom-actions {
		flex-shrink: 0; // 防止在 flex 布局中被压缩
		display: flex;
		justify-content: center;
		gap: 24rpx;
		width: 100%;
		background-color: #FFFFFF; // 添加白色背景，与页面背景区分
		padding: 30rpx;
		box-sizing: border-box; // 确保 padding 不会撑大宽度

	}

	// 统一的按钮基础样式 
	.action-button {
		margin: 0;
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		flex-shrink: 0;

		&::after {
			border: none;
		}
	}

	// 主操作按钮
	.btn-primary {
		background-color: $primary-red;
		color: #FFFFFF;
	}

	// 次操作按钮 
	.btn-secondary {
		background-color: #FFFFFF;
		color: $primary-red;
		border: 1rpx solid $primary-red;
	}
</style>